<template>
  <div>
    {{msg}}
<!--    v-bind 数据绑定-->
    <p v-bind:title="msg">{{msg}}</p>
<!--    :是v-bind的简写  语法糖-->
    <p :alt="msg">{{msg}}</p>
    <div :style="bgRed">one box</div>
    <div :style="[height,border]">two box</div>
    <div :style="{fontSize:'20px',background:'green'}">three box</div>
    <br/>
    <div :class="one">class</div>
    <div :class="{two}">two class</div>
    <div :class="{show:isShow,hidden:isHidden}">is show</div>
    <div :class="{test}">test</div>
<!--    绑定方法：数组方式-->
    <div :class="getStyleArr()">test数组方式绑定</div>
    <!--    绑定方法：对象方式方式-->
    <div :class="getStyleObj()">test对象方式绑定</div>
  </div>
</template>

<script>

export default {
  name: "App",
  data(){
    return{
        msg:'this is msg',
        bgRed:'background:red',
        height:'height:50px;margin-top:20px;',
        border:'border:1px black solid',
        one:'one',
        two:true,
        isShow: true,
        isHidden: false,
        test:true,
        three:'three',
        four:'four'
    }
  },
  methods:{
    // 数组方式
    getStyleArr(){
      return [this.three,this.four];
    },
    //对象方式
    getStyleObj(){
      return {'one':this.one,'two':this.two}
    }
  }
}
</script>

<style scoped>
  .one{
    font-size: 50px;
    color: green;
  }
  .two{
    border: 1px solid blue;
  }
  .three{
    background: orange;
  }
  .four{
    width: 150px;
    height: 50px;
    border: 1px solid red;
  }
  .show{
    display: block;
  }
  .hidden{
    display: none;
  }
  .test{
    background: yellow;
    width: 100px;
    height: 50px;
  }
</style>